{% extends ../base.html %}

{% block head %}
<script type="text/javascript" src="/static/lib/csv.js/csv.js"></script>
<script type="text/javascript" src="/static/lib/marked/marked.js"></script>
<script type="text/javascript" src="/static/js/marked-ext.js"></script>
<style>
.CodeMirror {
    width: 60rem;
    font-size:16px;
    height: auto;
}

#markdown-input {
    font-family: monospace;
}

</style>
{% end %}

{% block body %}
    <div style="">
 
    <span id="result" style="color:green"></span>
    
    </div>
    <div>

        <div>
        </div>
    </div>
    
        <div>
            {% if _is_admin and type == "file" %}
            <div style="float:right;">
                <a href="/wiki/{{name}}?op=edit">[编辑]</a>
            </div>
            {% elif _is_admin and type == "dir" %}
            <div style="float:right;">
                <a href="/wiki/add?type=file&target={{name}}">[添加文件]</a>
                <a href="/wiki/add?type=dir&target={{name}}">[添加目录]</a>
            </div>
            {% end %}
<!--             <h3>
                <a href="/wiki/">Home</a>
                {% for path in wikilist %}
                / <a href="/wiki/{{path}}">{{ os.path.basename(path) }}</a>
                {% end %}
            </h3>
 -->        </div>
        
    {% if type == "dir" %}
        <div>
            {% for child in children %}
                <li style="padding-top:6px;">
                    {% if child.type == "dir" %}
                        <img src="/static/img/folder.gif"/>
                    {% end %}
                    <a href="/wiki{{child.path}}">{{ child.name }}</a>
                </li>
            {% end %}
        </div>
    {% end %}
    
    {% if type == "file" or has_readme %}
        <div style="padding-top:20px;">
            <div id="epiceditor" class="row">
                <div id="markdown-input-div" class="col-md-6">
                    <textarea id="markdown-input" class="form-control" name="content" rows=50>{{?content}}</textarea>
                </div>

                <div id="markdown-output-div" class="col-md-12">

                </div>
            </div>
        </div>
    {% end %}
    
    
<div style="float:left;width:100%;">

<script>
    function switchRename() {
        if ($("#renameDiv").css("display") == "none") {
            $("#oldName").hide();
            $("#renameDiv").css("display", "block");
            $("#newName").val($("#oldName").html());
        } else {
            $("#oldName").show();
            $("#renameDiv").css("display", "none");
        }
    }

        
    // autosize textarea rows
    

    function edit() {
        $("#markdown-input-div").removeClass("hide");
        $("#markdown-output-div").removeClass("col-md-12").addClass("col-md-6");
        var height = Math.max(500, $("#markdown-output-div").height());
        $("#markdown-input").css({height:height+"px"});
    }
    
    function preview() {
        if (!$("#markdown-input-div").hasClass("hide")) {
            $("#markdown-input-div").addClass("hide");
            $("#markdown-output-div").removeClass("col-md-6").addClass("col-md-12");
        }
    }
    
    function renameFile() {
        var fileId = $("#fileId").text();
        var oldName = $("#oldName").html();
        var newName = $("#newName").val();
        if (newName) {
            $.post("/file/update", {
                option: "rename",
                fileId: fileId,
                newName: newName
            }, function (msg) {
                var result = JSON.parse(msg);
                if (result.success)
                {
                    switchRename();
                    window.location.reload();
                } else {
                    alert("修改失败, " + result.msg);
                }
            })
        }
    }

    $(function () {
        var old_content = $("#markdown-input-div").val();
        setInterval(function () {
            var input = $("#markdown-input").val();
            // not modified
            if (input == old_content) {
                return;
            }
            old_content = input;
            
            marked.showMenu = false;
            $("#markdown-output-div").html(marked.parse(input));
        }, 200);
        preview();
    })
</script>

{% end %}